<template>
  <view class="staff-item" :class="listData.state === '0' ? 'min' : ''">
    <view class="staff-logo">
      <image class="img" :src="listData.url"></image>
      <!--  -->
    </view>
    <view
      class="staff-title"
      :class="
        listData.remove && manage !== 0
          ? 'min'
          : listData.state === '0'
          ? 'apply'
          : ''
      "
    >
      <view class="name"
        >{{ listData.name
        }}<text v-if="listData.manage" class="manage">管理员</text></view
      >
      <!-- <view class="position">{{ listData.position }}</view> -->
    </view>
    <view class="staff-btn-box">
      <text
        v-if="listData.remove && manage !== 0"
        class="btn remove"
        @click="onAgree('移除')"
        >移除</text
      >
      <text
        v-if="listData.state === '0'"
        class="btn agree"
        @click="onAgree('同意')"
        >同意</text
      >
      <text
        v-if="listData.state === '0'"
        class="btn refuse"
        @click="onAgree('拒绝')"
        >拒绝</text
      >
      <text v-if="listData.state === '1'" class="btn join">已同意加入</text>
      <text v-if="listData.state === '2'" class="btn join">已拒绝加入</text>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";

const props = defineProps({
  listData: {
    type: Object,
  },
  manage: {
    type: [Number, String],
  },
});
const emits = defineEmits(["on-click", "check-change"]);

function onAgree(name) {
  emits("on-click", name, props.listData);
}

const checkChange = (flag) => {
  console.log(props.listData);
  props.listData.checked = flag;
  emits("check-change", props.listData);
};
</script>

<style lang="less" scoped>
@import url("@/static/style/global.less");

.staff-item {
  display: flex;
  flex-flow: row nowrap;
  // justify-content: start;
  justify-content: space-between;
  align-items: center;
  // padding-bottom: 20rpx;
  // padding-right: 3vw;
  width: 85vw;
  // margin-bottom: 50rpx;

  width: 93vw;
  // &.max {
  //   width: 93vw;
  // }
  &.min {
    width: 83vw;
  }
  .staff-logo {
    width: 78rpx;
    height: 78rpx;
    border-radius: 50%;
    border: 1px solid #dadada;
    text-align: center;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    margin-right: 50rpx;
    overflow: hidden;
    .img {
      width: 100%;
      height: 100%;
    }
  }

  .staff-title {
    width: 550rpx;

    .name {
      font-family: "ali";
      font-weight: bold;
      font-size: @font-size-31;
      color: @color-black;

      .manage {
        display: inline-block;
        width: 113rpx;
        height: 38rpx;
        line-height: 38rpx;
        margin: 0 10rpx;
        background: linear-gradient(
          90deg,
          #d0dbe6 0%,
          #e7eaf1 50%,
          #e4e8ef 100%
        );
        font-size: @font-size-20;
        color: @color-black;
        border-radius: 10rpx;
        text-align: center;
      }
    }

    .position {
      font-family: "ali";
      font-weight: 400;
      font-size: @font-size-23;
      color: @color-grey;
    }
    &.min {
      width: 430rpx;
    }
    &.apply {
      width: 280rpx;
    }
  }

  .staff-btn-box {
    display: flex;
    // padding-right: 40rpx;
    align-items: center;
    line-height: 80rpx;
    height: 80rpx;
    font-family: "ali";
    font-weight: 400;
    font-size: @font-size-31;
    text-align: center;

    .btn {
      margin: 0 20rpx;
    }

    .remove {
      color: @color-red;
    }

    .agree {
      color: @color-green;
    }

    .refuse {
      color: @color-orange;
    }

    .join {
      color: @color-grey;
    }
  }
}
</style>
